<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Oil</title>
    <link href="css/layui.css" rel="stylesheet">
    <link href="dist/gridstack.css" rel="stylesheet"/>
    <link href="css/common.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="css/oil.css">
    <link rel="stylesheet" href="css/font-awesome/css/font-awesome.css">
</head>
<body>
<div class="head layui-row">
    <div class="layui-col-xs6">
        <img src="images/logo.png" id="logo"/>
    </div>
    <div class="layui-col-xs6" style="text-align: right">
        <div class="search-box">
            <input id="search" placeholder="Search"/>
            <i class="icon-search"></i>
            <i class="icon-add-paper" onclick="addNew()"></i>
            <i class="icon-setting"></i>
            <label id="username">Ttmny</label>
        </div>
    </div>
</div>
<div class="main-container" id="box">
    <div class="top-btn-box">
        <input class="btn1 selected" type="button" value="Crude Oil"/>
        <input class="btn1" type="button" value="Peak And Valley"/>
        <a href="index.html"><input class="btn1" type="button" value="Stock"/></a>
        <input class="btn1" type="button" value="Gold"/>
    </div>
    <div class="main-box">
        <div class="grid-stack">
            <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="9" data-gs-height="7">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Brent Crude Oil Futures</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body">
                        <div class="time-div" id="top-time">
                            <span>1</span>
                            <span>5</span>
                            <span>15</span>
                            <span>30</span>
                            <span>1H</span>
                            <span>5H</span>
                            <span>1D</span>
                            <span>1W</span>
                            <span>1M</span>
                        </div>
                        <div class="index-title">
                            <i class="fa fa-long-arrow-up"></i>
                            <label class="index-value">{{indexData.last_px}}</label>
                            <label class="index-range">+{{indexData.px_change}} (
                                +{{indexData.px_change_rate}}%)</label>
                            <label class="index-name">Brent Crude Oil Index</label>
                        </div>
                        <div id="chart0"></div>
                        <div class="time-div" id="bottom-time">
                            <span>1D</span>
                            <span>1W</span>
                            <span>1M</span>
                            <span>3M</span>
                            <span>6M</span>
                            <span>1Y</span>
                            <span>5Y</span>
                            <span>Max</span>
                        </div>
                    </div>

                </div>
            </div>
            <div class="grid-stack-item" data-gs-x="9" data-gs-y="0" data-gs-width="3" :data-gs-height="7">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Brent Crude Oil Futures</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body">
                        <div class="tip-table-box">
                            <table class="layui-table" lay-skin="line" id="dataTable">
                                <tbody>
                                <tr>
                                    <td>Name</td>
                                    <td>{{indexData.prod_name}}</td>
                                </tr>
                                <tr>
                                    <td>Previous Close</td>
                                    <td>{{(indexData.preclose_px - 0).toFixed(2)}}</td>
                                </tr>
                                <tr>
                                    <td>OPEN</td>
                                    <td>{{(indexData.open_px - 0).toFixed(2)}}</td>
                                </tr>
                                <tr>
                                    <td>Day's Range</td>
                                    <td style="color: rgba(18, 143, 255, 1)">
                                        {{indexData.low_px}}-{{indexData.high_px}}<i></i></td>
                                </tr>
                                <tr>
                                    <td>Symbol</td>
                                    <td>{{indexData.symbol}}</td>
                                </tr>
                                <tr>
                                    <td>Newest</td>
                                    <td>{{indexData.last_px}}</td>
                                </tr>
                                <tr>
                                    <td>Change</td>
                                    <td>{{indexData.px_change}}</td>
                                </tr>
                                <tr>
                                    <td>Change rate</td>
                                    <td>{{indexData.px_change_rate}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="flag" class="grid-stack-item" data-gs-x="0" data-gs-y="7" data-gs-width="6" data-gs-height="6">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Forecast of Brent Crude Oil Futures</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body" id="chart2">
                    </div>
                </div>
            </div>

            <div class="grid-stack-item" data-gs-x="6" data-gs-y="7" :data-gs-width="flag?6:12" data-gs-height="6">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Market Sentiment of Brent Crude Oil Futures</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body" id="chart1">
                    </div>
                </div>
            </div>

            <div class="grid-stack-item" data-gs-x="0" :data-gs-y="14" data-gs-width="12" :data-gs-height="8">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Energy Futures Market</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body future-div">
                        <table class="layui-table" lay-skin="line" id="future">
                            <thead>
                            <!--<th style="text-align: left">
                                Futures
                                <span class="layui-table-sort layui-inline">
                                    <i class="layui-edge layui-table-sort-asc" title="up"></i>
                                    <i class="layui-edge layui-table-sort-desc" title="down"></i>
                                </span>
                            </th>-->
                            <th>Index</th>
                            <th>Date</th>
                            <th>Symbol</th>
                            <th>Previous</th>
                            <th>High</th>
                            <th>Low</th>
                            <th>Newest</th>
                            <th>Volume</th>
                            <th>Pratyaksa</th>
                            <th>Change</th>
                            </thead>
                            <tbody>
                            <tr v-for="(item,index) in bottomData">
                                <td>{{index + 1}}</td>
                                <td>{{item.Date}}</td>
                                <td>{{item.Symbol}}</td>
                                <td>{{item.LastClose}}</td>
                                <td>{{item.High}}</td>
                                <td>{{item.Low}}</td>
                                <td>{{item.NewPrice}}</td>
                                <td>{{item.Volume}}</td>
                                <td>{{item.Vol2}}</td>
                                <td :class="item.PriceChangeRatio > 0 ? 'up' : 'down'">
                                    {{item.PriceChangeRatio}}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.7.min.js"></script>

<script src="js/jquery-ui.min.js"></script>
<script src="js/layui/layui.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/lodash.min.js"></script>
<script src="js/knockout-min.js"></script>
<script src="dist/gridstack.js"></script>
<script src="js/gAjax.js"></script>
<script type="text/javascript">
    $(function () {
        var options = {};
        $('.grid-stack').gridstack(options);
        var grid = $('.grid-stack').data('gridstack');
        mainVue.initChartHeight();


        $('.icon-close').click(function () {
            var $tip = $(this).parents(".grid-stack-item");
            grid.remove_widget($tip)
        });

        $(".time-div span").click(function () {
            if ($(this).attr("class") == "time-span-check") {
                $(".time-div span").removeClass("time-span-check");
            } else {
                $(".time-div span").removeClass("time-span-check");
                $(this).addClass("time-span-check");
            }
        });
    });

    function addNew() {
        window.location.href = "jovearch/shujudaoru.html";
    }

    var data = [];
    var date = [];
    var now = new Date();
    var oneMinuate = 60 * 1000;
    var value = Math.random() * 1000;
    for (var i = 0; i < 100; i++) {
        //data.push(randomData());

        now = new Date(+now + oneMinuate);
        date.push([(now.getHours() >= 10 ? now.getHours() : ("0" + now.getHours())), (now.getMinutes() >= 10 ? now.getMinutes() : ("0" + now.getMinutes()))].join(':'));
        if (i == 0) {
            //data.push(((Math.random() - 0.5) * 20).toFixed(2));
            data.push(72.2);
        } else {
            data.push(((Math.random() - 0.5) * 10 + parseFloat(data[i - 1])).toFixed(2));
        }

    }

    var chart0, chart1, chart2;
    var mainVue = new Vue({
        el: '#box',
        data: {
            flag: false,
            indexData: {}, // 布伦特原油指数
            bottomData: [] // 底部能源数据
        },
        mounted: function () {
            var _this = this;
            _this.flag = getUrlParam("flag");
        },
        methods: {
            getBottomData: function () { // 最底下能源
                var _this = this;
                var url = 'http://ds.jctytech.com/stock.php?u=13501222321&symbol=IPBRNA0,NECLA0,NEHOA0,NENGA0,NECLF0,NEHOF0,NENGF0,IPBRNF0,IPGASF0,IPGASA0&type=stock';
                $.get(url, function (result) {
                    result.forEach(function (item) {
                        var date = new Date(item.Date * 1000);
                        item.Date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes();
                    });
                    _this.bottomData = result;
                });
            },
            getIndexData: function () {
                var _this = this;
                var url = 'https://api-ddc.wallstreetcn.com/market/real?fields=symbol,en_name,prod_name,last_px,px_change,px_change_rate,high_px,low_px,open_px,preclose_px,market_value,turnover_volume,turnover_ratio,turnover_value,dyn_pb_rate,amplitude,dyn_pe,trade_status,circulation_value,update_time,price_precision,week_52_high,week_52_low&prod_code=UKOIL.OTC';
                $.get(url, function (result) {
                    var indexData = {};
                    var fields = result.data.fields;
                    var value = result.data.snapshot['UKOIL.OTC'];
                    for (var i = 0; i < fields.length; i++) {
                        indexData[fields[i]] = value[i];
                    }
                    _this.indexData = indexData;

                });
            },
            initChartHeight: function ($tipBody) {//初始化chart容器高度, 初始化echarts
                var _this = this;
                if ($tipBody) { // 单独初始化
                    $tipBody.height($tipBody.parents(".tip-box").height() - 60);
                } else { // 群体初始化
                    $(".tip-body").each(function (index) {
                        if (index != 0) {
                            $(this).height($(this).parents(".tip-box").height() - 67);
                        }
                    });
                }

                $("#chart0").height($("#chart0").parents(".tip-box").height() - 195);
                var width = $("#chart0").parents(".tip-box").width();
                console.log($("#chart0").parents(".tip-box").width());
                $("#top-time span").width((width - 147) / 9);
                $("#bottom-time span").width((width - 143) / 8);

                chart0 = echarts.init(document.getElementById("chart0"));
                chart1 = echarts.init(document.getElementById("chart1"));
                if (_this.flag) {
                    chart2 = echarts.init(document.getElementById("chart2"));
                    _this.initChart2();
                }

                _this.initChart0();
                _this.initChart1();

                _this.getIndexData(); // 布伦特原油指数

                _this.getBottomData();
                setInterval(function () {
                    _this.getBottomData();
                    _this.getIndexData();
                }, 3000);
            },
            initChart0: function () {
                var _this = this;
                $.get('http://ds.jctytech.com/stock.php?u=13501222321&symbol=IPBRNA0&type=trend', function (rawData) {
                    var upColor = '#05cb91';
                    var downColor = '#f54f77';
                    _this.getOption(rawData, upColor, downColor);
                    console.log(rawData)
                });
            },
            getOption: function (data, upColor, downColor) {
                var xData = [];
                var trendData = [];
                var averageData = [];
                var volumeData = [];

                /*var a = new Date();
                a.setHours(8);
                a.setMinutes(1);
                a.setSeconds(0);*/
                /*for(var i=0;i<5*60;i++) {
                    var date = new Date(a.getTime() + 1000*60*i);
                    xData.push((date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes());
                }*/

                data.Data.forEach(function (item) {
                    var date = new Date(item.Date * 1000);
                    xData.push((date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes());
                    trendData.push(item.Trend);
                    averageData.push(item.Average);
                    volumeData.push(item.Volume);
                });
                chart0.setOption({
                    backgroundColor: '#1a1a1c',
                    animation: false,
                    title: {
                        text: 'Volume Amount',
                        top: '55%',
                        left: "25",
                        textStyle: {
                            fontSize: '12',
                            color: '#666',
                            fontWeight: 800
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        backgroundColor: 'rgba(245, 245, 245, 0.8)',
                        borderWidth: 1,
                        borderColor: '#ccc',
                        padding: 10,
                        textStyle: {
                            color: '#000'
                        }
                    },
                    axisPointer: {
                        link: {xAxisIndex: 'all'},
                        label: {
                            backgroundColor: '#777'
                        }
                    },
                    toolbox: {
                        show: false
                    },

                    visualMap: {
                        show: false,
                        seriesIndex: 5,
                        dimension: 2,
                        pieces: [{
                            value: 1,
                            color: downColor
                        }, {
                            value: -1,
                            color: upColor
                        }]
                    },
                    grid: [{
                        height: '40%',
                        top: "35px",
                        left: '30px',
                        right: '60px',
                        containLabel: true
                    }, {
                        top: "70%",
                        left: '50px',
                        right: '60px',
                        bottom: '15px',
                        containLabel: true
                    }],
                    xAxis: [{
                        show: false,
                        type: 'category',
                        data: xData,
                        scale: true,
                        boundaryGap: false,
                        axisLine: {onZero: false},
                        splitLine: {show: false},
                        axisLabel: {
                            show: false,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            }
                        },
                        min: 'dataMin',
                        max: 'dataMax',
                        splitNumber: 20
                    }, {
                        type: 'category',
                        data: xData,
                        gridIndex: 1,
                        scale: true,
                        boundaryGap: false,
                        axisLine: {onZero: false},
                        splitLine: {show: false},
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            }
                        },
                        splitNumber: 20,
                        min: 'dataMin',
                        max: 'dataMax',
                        axisPointer: {
                            z: 100
                        }
                    }],
                    yAxis: [{
                        axisLine: {show: false},
                        scale: true,
                        splitLine: {
                            lineStyle: {
                                color: '#2c2c2d',
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            }
                        },
                        splitArea: {
                            show: false
                        }
                    }, {
                        scale: true,
                        gridIndex: 1,
                        splitNumber: 2,
                        axisLine: {show: false},
                        axisTick: {show: false},
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            },
                            /*formatter: function (val) {
                                return (parseFloat(val / 100000000)).toFixed(0) + '亿';
                            }*/
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#2c2c2d',
                                type: 'dashed'
                            }
                        },
                    }],
                    dataZoom: [{
                        type: 'inside',
                        xAxisIndex: [0, 1],
                        start: 0,
                        end: 100
                    }],
                    series: [{
                        type: 'line',
                        name: 'Trend',
                        showSymbol: false,
                        hoverAnimation: false,
                        color: "rgba(18, 143, 255, 1)",
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(25, 46, 67, 0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(18, 143, 255, 0)'
                            }])
                        },
                        data: trendData
                    }, {
                        type: 'line',
                        name: 'Average',
                        showSymbol: false,
                        hoverAnimation: false,
                        color: '#05ca92',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(25, 33, 36, 0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(18, 143, 255, 0)'
                            }])
                        },
                        data: averageData
                    }, {
                        name: 'Volume',
                        type: 'bar',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        barMaxWidth: 3,
                        data: volumeData,
                        itemStyle: {
                            normal: {
                                color: upColor,
                                color0: downColor,
                                borderColor: null,
                                borderColor0: null
                            }
                        }

                    }]
                }, true);
            },
            initChart1: function () {
                $.get('json/sentiment_index_of_crude_oil_market.json', function (rawData) {
                    var xData = [];
                    var data1 = [];
                    rawData.forEach(function (item) {
                        xData.push(item.date);
                        data1.push(item.index1);
                    });
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            },
                        },
                        grid: {
                            top: "40px",
                            left: '30px',
                            right: '35px',
                            bottom: '30px',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            splitLine: {show: false},
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#666',
                                    fontSize: '14',
                                    fontWeight: 800
                                }
                            },
                            data: xData
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(51, 51, 51, 0.7)'
                                }
                            },
                            axisLine: {show: false},
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#666',
                                    fontSize: '14',
                                    fontWeight: 800
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        series: [
                            {
                                name: 'Sentiment Index',
                                type: 'bar',
                                barMaxWidth: 2.5,
                                color: "#118eff",
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'bottom'
                                    }
                                },
                                data: data1
                            }
                        ]
                    };

                    chart1.setOption(option);
                });
            },
            initChart2: function () {
                $.get('json/oil_price_forecast.json', function (rawData) {
                    var xData = [];
                    var data1 = [];
                    var data2 = [];
                    rawData.forEach(function (item) {
                        xData.push(item.date);
                        data1.push(item.index1);
                        data2.push(item.index2);
                    });

                    var option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            top: 20,
                            right: 35,
                            data: ['actual', 'prediction']
                        },
                        grid: {
                            top: "60px",
                            left: '30px',
                            right: '35px',
                            bottom: '30px',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: xData,
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#666',
                                        fontSize: '14',
                                        fontWeight: 800
                                    }
                                },
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        type: 'dashed',
                                        color: 'rgba(51, 51, 51, 0.7)'
                                    }
                                },
                                axisLine: {show: false},
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#666',
                                        fontSize: '14',
                                        fontWeight: 800
                                    }
                                },
                                axisTick: {
                                    show: false
                                }
                            }
                        ],
                        series: [
                            {
                                name: '布伦特原油价格',
                                type: 'line',
                                symbol: 'none',
                                color: "#118eff",
                                stack: '总量',
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(25, 46, 67, 0.3)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(18, 143, 255, 0)'
                                    }])
                                },
                                data: data1
                            },
                            {
                                name: '预测值',
                                type: 'line',
                                symbol: 'none',
                                color: '#05ca92',
                                stack: '总量',
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(25, 33, 36, 0.3)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(18, 143, 255, 0)'
                                    }])
                                },
                                data: data2
                            }
                        ]
                    };
                    chart2.setOption(option);
                });
            }
        }
    });

</script>
</body>
</html>